<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balloon Blast Adventure - Enhanced Fun Popping Game</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

    <meta name="description" content="Enhanced balloon popping game with varied scoring system, bonus items, and penalty objects for more engaging gameplay">
    <meta name="keywords" content="balloon game, kids game, popping game, HTML5 game, fun game, educational game">
    <meta name="author" content="Balloon Blast Adventure">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            overflow-x: hidden;
            user-select: none;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding-top: 20px;
        }

        .ad-space {
            width: 160px;
            height: 600px;
            background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
            border: 2px dashed #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            color: #888;
            font-size: 14px;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .ad-space a {
            margin: 5px 0;
            display: block;
            transition: transform 0.3s ease;
        }

        .ad-space a:hover {
            transform: scale(1.05);
        }

        .ad-space img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 10px;
            border: 2px solid #8B4513;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .game-container {
            width: 480px;
            height: 85vh;
            max-height: 700px;
            background-color: cornsilk;
            position: relative;
            overflow: hidden;
            border: 3px solid #8B4513;
            border-radius: 10px;
            margin: 0 20px;
        }

        .floating-item {
            position: absolute;
            bottom: -60px;
            cursor: pointer;
            transition: transform 0.1s ease;
            z-index: 10;
        }

        .floating-item:hover {
            transform: scale(1.1);
        }

        .balloon {
            font-size: 32px;
            animation: floatUp linear;
        }

        .bonus-item {
            font-size: 35px;
            animation: floatUp linear;
        }

        .penalty-item {
            font-size: 38px;
            animation: floatUp linear;
        }

        .floating-points {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            pointer-events: none;
            z-index: 20;
            animation: floatPoints 1.5s ease-out forwards;
        }

        .positive-points {
            color: #22c55e;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .negative-points {
            color: #ef4444;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        @keyframes floatUp {
            from {
                bottom: -60px;
                opacity: 1;
                transform: rotate(0deg);
            }
            to {
                bottom: calc(100vh + 60px);
                opacity: 0.8;
                transform: rotate(360deg);
            }
        }

        @keyframes floatPoints {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            50% {
                opacity: 1;
                transform: translateY(-30px) scale(1.2);
            }
            100% {
                opacity: 0;
                transform: translateY(-60px) scale(0.8);
            }
        }

        .scoreboard {
            background: linear-gradient(45deg, #ffd700, #ffed4e);
            border: 3px solid #d4af37;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .start-screen {
            background-color: white;
        }

        .game-button {
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
            border: none;
            border-radius: 25px;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .game-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .game-title {
            font-size: 3rem;
            font-weight: 900;
            color: #2c3e50;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
            text-align: center;
            letter-spacing: 1px;
            font-family: 'Arial Black', Arial, sans-serif;
        }

        .screen-text {
            color: #2c3e50;
        }

        .scoring-grid {
            background-color: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            border: 2px solid #e9ecef;
        }

        .end-game-stats {
            background-color: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            border: 2px solid #e9ecef;
        }

        /* Angel Mascot Styles */
        .angel-mascot-container {
            position: absolute;
            top: 18px;
            left: 10px;
            z-index: 100;
            transition: transform 0.3s ease;
        }

        .angel-mascot-container:hover {
            transform: scale(1.1);
        }

        /* End Screen Popup */
        .end-popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 100;
            text-align: center;
            width: 90%;
            max-width: 400px;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .end-popup.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: all;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 90;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        @media (max-width: 768px) {
            .ad-space {
                display: none;
            }
            .game-container {
                width: 95vw;
                margin: 0;
                border-radius: 0;
            }
            body {
                display: block;
                padding-top: 10px;
            }
            .game-title {
                font-size: 2rem;
            }
            
            /* Adjust angel size on mobile */
            .angel-mascot-container {
                transform: scale(0.8);
                top: 5px;
                left: 5px;
            }

            .end-popup {
                width: 85%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- Angel Mascot -->
    <a href="../index.html" class="angel-mascot-container">
        <div class="angel-face" id="angelFace" style="
            display: inline-block;
            width: 40px;
            height: 40px;
            position: relative;
            vertical-align: middle;
            margin: 0 4px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ffecd1, #ffb88c);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            overflow: visible;
        ">
            <!-- Hair -->
            <div style="
                content: '';
                position: absolute;
                top: -8px;
                left: -2px;
                right: -2px;
                height: 25px;
                background: linear-gradient(145deg, #d4af37, #ffd700);
                border-radius: 50% 50% 45% 45%;
                z-index: 2;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            "></div>
            
            <!-- Halo -->
            <div style="
                content: '';
                position: absolute;
                top: -15px;
                left: 50%;
                transform: translateX(-50%);
                width: 35px;
                height: 6px;
                border: 2px solid #ffd700;
                border-radius: 50%;
                background: transparent;
                box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
                z-index: 3;
            "></div>
            
            <!-- Left Eye -->
            <div class="left-eye" style="
                position: absolute;
                width: 8px;
                height: 8px;
                background: #fff;
                border-radius: 50%;
                top: 45%;
                left: 28%;
                border: 1px solid #e0e0e0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                z-index: 1;
            ">
                <div class="left-pupil" id="leftPupil" style="
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: #2563eb;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: all 0.1s ease;
                    z-index: 1;
                ">
                    <div style="
                        content: '';
                        position: absolute;
                        width: 1.5px;
                        height: 1.5px;
                        background: white;
                        border-radius: 50%;
                        top: 20%;
                        left: 30%;
                    "></div>
                </div>
            </div>
            
            <!-- Right Eye -->
            <div class="right-eye" style="
                position: absolute;
                width: 8px;
                height: 8px;
                background: #fff;
                border-radius: 50%;
                top: 45%;
                left: 64%;
                border: 1px solid #e0e0e0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                z-index: 1;
            ">
                <div class="right-pupil" id="rightPupil" style="
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: #2563eb;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: all 0.1s ease;
                    z-index: 1;
                ">
                    <div style="
                        content: '';
                        position: absolute;
                        width: 1.5px;
                        height: 1.5px;
                        background: white;
                        border-radius: 50%;
                        top: 20%;
                        left: 30%;
                    "></div>
                </div>
            </div>
            
            <!-- Nose -->
            <div class="nose" style="
                position: absolute;
                top: 55%;
                left: 50%;
                transform: translateX(-50%);
                width: 2px;
                height: 3px;
                background: #ffb88c;
                border-radius: 0 0 50% 50%;
                z-index: 1;
            "></div>
            
            <!-- Smile -->
            <div class="smile" style="
                position: absolute;
                top: 65%;
                left: 50%;
                transform: translateX(-50%);
                width: 12px;
                height: 6px;
                border: 1.5px solid #ff6b8a;
                border-top: none;
                border-radius: 0 0 12px 12px;
                background: transparent;
                z-index: 1;
            "></div>
            
            <!-- Cheeks -->
            <div class="left-cheek" style="
                position: absolute;
                width: 6px;
                height: 4px;
                background: rgba(255, 182, 193, 0.6);
                border-radius: 50%;
                top: 58%;
                left: 15%;
                z-index: 1;
            "></div>
            <div class="right-cheek" style="
                position: absolute;
                width: 6px;
                height: 4px;
                background: rgba(255, 182, 193, 0.6);
                border-radius: 50%;
                top: 58%;
                right: 15%;
                z-index: 1;
            "></div>
        </div>
    </a>

    <!-- Left Ad Space -->
    <div class="ad-space hidden md:flex" style="position: fixed; left: 10px; top: 70px;">
    <a href="../balloonblast/balloonblast.html" title="Balloon Blast">
        <img src="../balloonblast/balloonblast.png" alt="Balloon Blast">
    </a>
        <a href="../memorychallenge/memchal.html" title="Memory Challenge">
            <img src="../memorychallenge/memorychallenge.png" alt="Memory Challenge">
        </a>
        <a href="../mergetiles/mergetiles.html" title="Merge Tiles">
            <img src="../mergetiles/mergetiles.png" alt="Merge Tiles">
        </a>
        <a href="../multihorn/multihorn.html" title="MultiHorn">
            <img src="../multihorn/multihorn.png" alt="MultiHorn">
        </a>
        <a href="../zenbreath/zenbreath.html" title="Zen Breath">
            <img src="../zenbreath/zenbreath.png" alt="Zen Breath">
        </a>
    </div>

    <!-- Game Container -->
    <div class="game-container">
        <!-- Start Screen -->
        <div id="start-screen" class="start-screen fixed inset-0 flex flex-col items-center justify-center z-50">
            <h1 class="game-title">
                🎈 Balloon Blast Adventure 🎈
            </h1>
            <p class="text-xl screen-text mb-6 text-center max-w-lg font-semibold">
                Pop colorful balloons and collect bonus items! Watch out for black balloons and mines!
            </p>
            <div class="scoring-grid mb-6">
                <h3 class="text-lg font-bold screen-text mb-3 text-center">Scoring Guide</h3>
                <div class="grid grid-cols-2 gap-2 text-sm screen-text">
                    <div class="font-medium">🎈 Red: 10 pts</div>
                    <div class="font-medium">🎈 Blue: 15 pts</div>
                    <div class="font-medium">🎈 Green: 20 pts</div>
                    <div class="font-medium">🎈 Yellow: 25 pts</div>
                    <div class="font-medium">🎈 Purple: 30 pts</div>
                    <div class="font-medium">⭐ Star: 50 pts</div>
                    <div class="font-medium">❤️ Heart: 40 pts</div>
                    <div class="font-medium">🌙 Moon: 35 pts</div>
                    <div class="font-medium">🍭 Candy: 45 pts</div>
                    <div class="font-medium">🍦 Ice Cream: 55 pts</div>
                    <div class="font-medium">⚫ Black: -20 pts</div>
                    <div class="font-medium text-red-600">💣 Mine: -30 pts</div>
                </div>
            </div>
            <button id="start-btn" class="game-button">
                <i class="fas fa-play mr-2"></i>Start Adventure!
            </button>
        </div>

        <!-- Scoreboard -->
        <div id="scoreboard" class="scoreboard hidden absolute top-4 left-4 p-3 text-black font-bold text-sm z-30">
            <div class="flex items-center space-x-3">
                <div class="flex items-center">
                    <i class="fas fa-clock mr-1 text-blue-600"></i>
                    <span id="time">60</span>s
                </div>
                <div class="flex items-center">
                    <i class="fas fa-star mr-1 text-yellow-500"></i>
                    <span id="score">0</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-bullseye mr-1 text-red-500"></i>
                    <span id="popped">0</span>
                </div>
            </div>
        </div>

        <!-- Game Area -->
        <div id="game-area" class="w-full h-full relative"></div>
        
        <!-- Overlay for end screen -->
        <div id="overlay" class="overlay"></div>
        
        <!-- End Screen Popup -->
        <div id="end-popup" class="end-popup">
            <h1 class="text-4xl font-bold screen-text mb-6">🎉 Game Over! 🎉</h1>
            <div class="end-game-stats text-center">
                <p class="text-2xl screen-text mb-4">Final Score: <span id="final-score" class="text-green-600 font-bold">0</span></p>
                <p class="text-xl screen-text mb-6">Balloons Popped: <span id="final-popped" class="text-blue-600 font-bold">0</span></p>
                <div id="performance-message" class="text-lg screen-text mb-6 font-semibold"></div>
            </div>
            <button id="play-again-btn" class="game-button">
                <i class="fas fa-redo mr-2"></i>Play Again!
            </button>
        </div>
    </div>

    <!-- Right Ad Space -->
    <div class="ad-space hidden md:flex" style="position: fixed; right: 10px; top: 70px;">
        <a href="../numberflow/numberflowpro.html" title="NumberFlow Pro">
            <img src="../numberflow/numberflowpro.png" alt="NumberFlow Pro">
        </a>
        <a href="../quickmath/quickmath.html" title="Quick Math">
            <img src="../quickmath/quickmath.png" alt="Quick Math">
        </a>
        <a href="../aquarium/aquarium.html" title="Aquarium">
            <img src="../aquarium/aquarium.png" alt="Aquarium">
        </a>
        <a href="../nexusgrid/nexusgrid.html" title="Nexus Grid">
            <img src="../nexusgrid/nexusgrid.png" alt="Nexus Grid">
        </a>
        <a href="../interactivelights/interactivelights.html" title="Interactive Lights">
            <img src="../interactivelights/interactivelights.png" alt="Interactive Lights">
        </a>
    </div>

    <script>
        // Game variables
        let gameRunning = false;
        let gameInterval;
        let timeInterval;
        let difficultyInterval;
        let timeLeft = 60;
        let score = 0;
        let poppedCount = 0;
        let currentSpawnRate = 800; // Initial spawn rate in milliseconds

        // DOM elements
        const startScreen = document.getElementById('start-screen');
        const scoreboard = document.getElementById('scoreboard');
        const startBtn = document.getElementById('start-btn');
        const gameArea = document.getElementById('game-area');
        const timeDisplay = document.getElementById('time');
        const scoreDisplay = document.getElementById('score');
        const poppedDisplay = document.getElementById('popped');
        const finalScoreDisplay = document.getElementById('final-score');
        const finalPoppedDisplay = document.getElementById('final-popped');
        const performanceMessage = document.getElementById('performance-message');
        const endPopup = document.getElementById('end-popup');
        const overlay = document.getElementById('overlay');
        const playAgainBtn = document.getElementById('play-again-btn');

        // Item types with their properties
        const itemTypes = {
            // Regular balloons - now using actual balloon emojis
            red: { emoji: '🎈', points: 10, type: 'balloon', color: '#ff4444' },
            blue: { emoji: '🎈', points: 15, type: 'balloon', color: '#4444ff' },
            green: { emoji: '🎈', points: 20, type: 'balloon', color: '#44ff44' },
            yellow: { emoji: '🎈', points: 25, type: 'balloon', color: '#ffff44' },
            purple: { emoji: '🎈', points: 30, type: 'balloon', color: '#ff44ff' },
            
            // Bonus items
            star: { emoji: '⭐', points: 50, type: 'bonus' },
            heart: { emoji: '❤️', points: 40, type: 'bonus' },
            moon: { emoji: '🌙', points: 35, type: 'bonus' },
            candy: { emoji: '🍭', points: 45, type: 'bonus' },
            icecream: { emoji: '🍦', points: 55, type: 'bonus' },
            
            // Penalty items
            black: { emoji: '⚫', points: -20, type: 'penalty' },
            mine: { emoji: '💣', points: -30, type: 'penalty' }
        };

        // Weighted probability for item spawning - increased bonus frequency
        const spawnWeights = {
            red: 18, blue: 16, green: 14, yellow: 12, purple: 10,
            star: 10, heart: 12, moon: 11, candy: 10, icecream: 8,
            black: 2, mine: 1
        };

        /**
         * Creates a floating item (balloon, bonus, or penalty)
         */
        function createFloatingItem() {
            if (!gameRunning) return;

            // Select random item type based on weights
            const totalWeight = Object.values(spawnWeights).reduce((a, b) => a + b, 0);
            let random = Math.random() * totalWeight;
            let selectedType = '';

            for (const [type, weight] of Object.entries(spawnWeights)) {
                random -= weight;
                if (random <= 0) {
                    selectedType = type;
                    break;
                }
            }

            const itemData = itemTypes[selectedType];
            const item = document.createElement('div');
            
            // Set item properties
            item.classList.add('floating-item');
            item.classList.add(itemData.type === 'balloon' ? 'balloon' : 
                             itemData.type === 'bonus' ? 'bonus-item' : 'penalty-item');
            item.textContent = itemData.emoji;
            item.dataset.points = itemData.points;

            // Color balloons appropriately
            if (itemData.color) {
                item.style.filter = `hue-rotate(${getHueRotation(selectedType)}deg)`;
            }

            // Random horizontal position
            const gameAreaWidth = gameArea.offsetWidth;
            item.style.left = Math.random() * (gameAreaWidth - 60) + 30 + 'px';

            // Slower animation duration for more relaxed gameplay
            const duration = Math.random() * 3 + 5;
            item.style.animationDuration = duration + 's';

            // Add click event listener
            item.addEventListener('click', () => popItem(item));

            // Remove item when animation ends
            item.addEventListener('animationend', () => {
                if (item.parentNode) {
                    item.remove();
                }
            });

            gameArea.appendChild(item);
        }

        /**
         * Increases the difficulty by spawning items more frequently
         */
        function increaseDifficulty() {
            if (!gameRunning) return;
            
            // Decrease spawn rate by 100ms (faster spawning)
            currentSpawnRate = Math.max(300, currentSpawnRate - 100);
            
            // Clear the old interval and set a new one with faster rate
            clearInterval(gameInterval);
            gameInterval = setInterval(createFloatingItem, currentSpawnRate);
        }

        /**
         * Get hue rotation for different colored balloons
         */
        function getHueRotation(type) {
            const rotations = {
                red: 0,      // Default balloon color
                blue: 240,   // Rotate to blue
                green: 120,  // Rotate to green
                yellow: 60,  // Rotate to yellow
                purple: 280  // Rotate to purple
            };
            return rotations[type] || 0;
        }

        /**
         * Handles item popping logic
         */
        function popItem(item) {
            const points = parseInt(item.dataset.points);
            const rect = item.getBoundingClientRect();
            
            // Update score
            score += points;
            poppedCount++;
            scoreDisplay.textContent = score;
            poppedDisplay.textContent = poppedCount;

            // Create floating points animation
            showFloatingPoints(points, rect.left + rect.width/2, rect.top + rect.height/2);

            // Remove the item
            item.remove();
        }

        /**
         * Shows floating points animation when item is popped
         */
        function showFloatingPoints(points, x, y) {
            const floatingText = document.createElement('div');
            floatingText.classList.add('floating-points');
            floatingText.classList.add(points > 0 ? 'positive-points' : 'negative-points');
            floatingText.textContent = points > 0 ? `+${points}` : points;
            
            // Position relative to viewport
            floatingText.style.left = x + 'px';
            floatingText.style.top = y + 'px';
            floatingText.style.position = 'fixed';
            
            document.body.appendChild(floatingText);

            // Remove after animation
            setTimeout(() => {
                if (floatingText.parentNode) {
                    floatingText.remove();
                }
            }, 1500);
        }

        /**
         * Starts the game
         */
        function startGame() {
            startScreen.style.display = 'none';
            scoreboard.style.display = 'block';
            gameRunning = true;

            // Reset game state
            score = 0;
            poppedCount = 0;
            timeLeft = 60;
            currentSpawnRate = 800; // Reset spawn rate
            scoreDisplay.textContent = '0';
            poppedDisplay.textContent = '0';
            timeDisplay.textContent = '60';

            // Hide end popup if visible
            endPopup.classList.remove('active');
            overlay.classList.remove('active');

            // Start spawning items
            gameInterval = setInterval(createFloatingItem, currentSpawnRate);

            // Start countdown timer
            timeInterval = setInterval(() => {
                timeLeft--;
                timeDisplay.textContent = timeLeft;

                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);

            // Start difficulty progression - increase frequency every 20 seconds
            difficultyInterval = setInterval(increaseDifficulty, 20000);
        }

        /**
         * Ends the game and shows results
         */
        function endGame() {
            gameRunning = false;
            clearInterval(gameInterval);
            clearInterval(timeInterval);
            clearInterval(difficultyInterval);

            // Show end popup
            finalScoreDisplay.textContent = score;
            finalPoppedDisplay.textContent = poppedCount;

            // Performance message based on score
            let message = '';
            if (score >= 1000) {
                message = '🏆 Amazing! You are a Balloon Master!';
            } else if (score >= 500) {
                message = '🎯 Great job! Keep practicing!';
            } else if (score >= 200) {
                message = '👍 Good work! You are improving!';
            } else {
                message = '🌟 Nice try! Practice makes perfect!';
            }
            performanceMessage.textContent = message;
            
            // Show the popup and overlay
            endPopup.classList.add('active');
            overlay.classList.add('active');
        }

        // Event listeners
        startBtn.addEventListener('click', startGame);
        playAgainBtn.addEventListener('click', startGame);

        // Prevent context menu on right click
        document.addEventListener('contextmenu', e => e.preventDefault());

        // Angel Mascot Eye Tracking Script
        document.addEventListener('DOMContentLoaded', function() {
            const angelFace = document.getElementById('angelFace');
            const leftPupil = document.getElementById('leftPupil');
            const rightPupil = document.getElementById('rightPupil');
            
            // Only activate if elements exist
            if (angelFace && leftPupil && rightPupil) {
                // Track mouse movement
                document.addEventListener('mousemove', function(e) {
                    const rect = angelFace.getBoundingClientRect();
                    const faceCenterX = rect.left + rect.width / 2;
                    const faceCenterY = rect.top + rect.height / 2;
                    
                    // Calculate angle to cursor
                    const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
                    
                    // Limit pupil movement range
                    const maxMovement = 1.5;
                    const pupilX = Math.cos(angle) * maxMovement;
                    const pupilY = Math.sin(angle) * maxMovement;
                    
                    // Move pupils
                    leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                    rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                });
                
                // Reset when mouse leaves
                document.addEventListener('mouseleave', function() {
                    leftPupil.style.transform = 'translate(-50%, -50%)';
                    rightPupil.style.transform = 'translate(-50%, -50%)';
                });
            }
        });
    </script>
</body>
</html>